<template>
	<view>
		<view class="top-view">
			<u-steps mode="number" :list="numList" :current="current"></u-steps>
		</view>
		<view class="view-bottom-cover">
			<view class="view-file-choosen">
				<u-empty v-if="fileList.length<1" text="您还没有上传文件哦" mode="list"></u-empty>
				<view v-for="(item,index) in fileList" :key="index" class="view-file-info">
					
					<u-row>
<!-- 						<u-col :span="2" v-if="isPrintting===false">
							<view class="view-file-check">
								<u-checkbox 
									shape="circle"
									size="50"
									v-model="item.checked" 
									></u-checkbox>
							</view>
						</u-col> -->
						<u-col :span="2">
							<view class="view-file-img">
								<view class="view-file-img" v-if ="fileIcon[index] === 'doc' || fileIcon[index] ==='docx'">
									<image class="image-file-img" :src="'../../static/images/index/word.png'"></image>
								</view>
								<view class="view-file-img" v-else-if ="fileIcon[index] === 'xls' || fileIcon[index] === 'xlsx'">
									<image class="image-file-img" :src="'../../static/images/index/excel.png'"></image>
								</view>
								<view class="view-file-img" v-else-if ="fileIcon[index] ==='jpeg' || fileIcon[index] === 'jpg' || fileIcon[index] === 'png'">
									<image class="image-file-img" :src="'../../static/images/index/image.png'"></image>
								</view>
								<view class="view-file-img" v-else-if ="fileIcon[index] === 'ppt' || fileIcon[index] === 'pptx' ">
									<image class="image-file-img" :src="'../../static/images/index/ppt.png'"></image>
								</view>
								<view class="view-file-img" v-else  >
									<image class="image-file-img" :src="'../../static/images/index/'+fileIcon[index]+'.png'"></image>
								</view>
							</view>
						</u-col>
						<u-col :span="7">
							<view class="view-file-name">{{item.name}}</view>
							<view class="view-file-upload-time">{{item.time}}</view>
							<view class="view-file-size">{{(item.size/1000000).toFixed(2) +'M'}}</view>
						</u-col>
						<u-col :span="3" v-if="isPrintting===true">
							<view v-if="issuccess===true">
								<view class="view-file-result success">
									打印成功
								</view>
							</view>
							<view v-else>
								<view class="view-file-result fail">
									打印失败
								</view>
							</view>
							
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="view-printer-cover">
				<view style="font-weight:bolder">
					当前所选打印机
				</view>
				<view class="view-printer">
					<u-row>
						<u-col :span="4">
							<view class="view-printer-img">
								<image class="image-printer-img" src="../../static/images/index/printer.png"></image>
							</view>
						</u-col>
						<u-col :span="5">
							<view class="view-printer-name">{{printerName}}</view>
							<view class="view-printer-status online">{{printerStatus}}</view>
						</u-col>
						<u-col :span="3">
							<view class="view-printer-change">
								<u-icon name="more-dot-fill" color="C9C9C9" size="50"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="view-btn-group" v-if="isPrintting===false">
				<u-button class="btn-btngroup" :ripple="true" type="success" @click="print"><u-icon name="fingerprint" color="white" size="30"></u-icon> 打印</u-button>
				<u-button class="btn-btngroup" :ripple="true" type="error"   @click="backToIndex"><u-icon name="info-circle-fill" color="white" size="30"></u-icon> 取消</u-button>
			</view>
			<view class="view-btn-group" v-if="isPrintting===true">
				<u-button class="btn-btngroup" :ripple="true" type="success" @click="backToIndex"><u-icon name="fingerprint" color="white" size="30"></u-icon> 完成</u-button>
			</view>
		</view>
		

	</view>
</template>

<script>
	var app = getApp()
	
	export default {
			data() {
				return {
					current:2,
					isPrintting:false,
					issuccess:true,
					
					printerUuid:"",    //打印机uuid
					printerName:"未选中",    //打印机名称
					printerStatus:"未知",  //打印机状态
					
					fileList:[],    //文件列表
					fileIcon:[],     //文件图标
					options:'', //打印选项预留
					
					numList: [{
						name: '上传文件'
					}, {
						name: '扫码打印'
					}, {
						name: '确认订单'
					}, {
						name: '打印'
					}, ]
					
				}
			},
			
			onShow: function() {
				// 加载页面的时候将全局变量赋值
				this.printerUuid = app.printerUuid
				this.printerName = app.printerName
				this.printerStatus = app.printerStatus
				this.fileList = app.selectedFileList
				this.fileIcon = app.selectedFileListIcon		
			},
		
			methods:{
				print(){
					this.current++	
					let  that = this
					for( let  i = 0 ; i < this.fileList.length; i++){
						uni.showLoading({
							title: "正在打印",
							mask: true
						})
						let fileUuid = this.fileList[i].fileUuid
						let printerUuid = this.printerUuid
						let options = this.options
						this.printFile(fileUuid,printerUuid,options)
						
					}
				},
			
				//文件打印监听
			   printMonitoring(jobUuid) {
			    	var that = this
					let  count = 0
			    	return new Promise((resolve, reject) => {
			    		const timeout = setInterval(function() {
			    			that.$printFileMonitoring(jobUuid)
			    				.then(res => {
			    					// console.log(`${jobUuid}: ${res.data.data.status}`)
			    					if (res.data.data.status === 'done') {
										that.isPrintting = true
										that.issuccess = true
			    						resolve('finish')
			    						uni.hideLoading()
			    						clearInterval(timeout)
			    					}
			    					else if (res.data.data.status === 'commit') {
			    						uni.showLoading({
			    							title: "上传中",
			    							mask: true
			    						})
										count ++
					
			    					}
									else{
										uni.hideLoading()
										uni.showToast({
											title: "打印失败",
											icon: "none"
										})
										that.isPrintting = true
										that.issuccess = false
										clearInterval(timeout)
									}
									if(count > 60){
										 uni.hideLoading()
											uni.showToast({
												title: "打印失败",
												icon: "none"
											})
											that.isPrintting = true
											that.issuccess = false
											clearInterval(timeout)
									}
			    				})
			    		}, 1000)
			    		
			    	})
			    },
			
				//打印文件
				printFile(fileUuid,printerUuid,options){
					let  that = this
					that.$printFile(fileUuid,printerUuid,options).then( async res => {
						let jobUuid = res.data.data.jobUuid
						await that.printMonitoring(jobUuid)    //等待监听
						},
					)
					
				},
				
				//返回主页
				backToIndex(){
					uni.switchTab({
						url:"../index/index"
					})
				}
			}
		}
</script>

<style>
	.top-view{
		margin-top: 40rpx;
	}
	.view-bottom-cover{
		background-color: #f3f4f6;
		margin-top: 40rpx;
		height:calc( 100vh - 180rpx);
		padding: 20rpx 30rpx;

	}
	.view-file-title{
		padding: 20rpx;
		width: 100%;
		height: 70rpx;
		background-color: white;
		text-align: center;
	}
	.view-file-choosen{
		padding: 20rpx;
		width: 100%;
		height: calc(100% - 560rpx);
		background-color: white;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.view-file-info{
		border: 1rpx solid #F1F1F1;
		width: 100%;
		height:200rpx;
	}
	.view-btn-group{
		margin-top:15rpx;
		width: 100%;
		height: 190rpx;
	}
	.btn-btngroup{
		margin-top:15rpx;
		margin-bottom:15rpx;
		display: block;
	}
	.view-file-img{
		/* background-color: red; */
		margin:60rpx 10rpx;
		width: 80rpx;
		height: 80rpx;
	}
	.view-file-name{
		/* background-color: red; */
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		width: calc(100% - 10rpx);
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: bolder;
	}
	.view-file-upload-time{
		/* background-color: red; */
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		width: calc(100% - 10rpx);
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		color: #C9C9C9;
		text-align: right;
	}
	.view-file-size{
		/* background-color: red; */
		margin-top: 30rpx;
		margin-bottom: 15rpx;
		width: calc(100% - 10rpx);
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		color: #C9C9C9;
		text-align: right;
	}
	.image-file-img{
		width: 100%;
		height: 100%;
	}
	.view-file-check{
		padding-left: 20rpx;
		line-height: 180rpx;
	}
	.view-printer-cover{
		border: 1rpx solid #F1F1F1;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #f3f4f6;
		padding: 20rpx 15rpx 2rpx 15rpx;
		height:300rpx;
	}
	.view-printer{
		border-radius: 20rpx 20rpx 0 0;
		margin-top: 20rpx;
		padding: 20rpx;
		width: 100%;
		height: 275rpx;
		background-color: white;
		text-align: center;
	}
	.image-printer-img{
		width: 100%;		height: 100%;
	}
	.view-printer-img{
		/* background-color: red; */
		margin:30rpx 30rpx;
		width: 130rpx;
		height: 130rpx;
	}
	.view-printer-name{
		/* background-color: red; */
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		width: calc(100% - 10rpx);
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: bolder;
		text-align: left;
	}
	.view-printer-status{
		/* background-color: red; */
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		width: 100rpx;
		padding:10rpx 20rpx;
		color: white;
		height: 60rpx;
		/* line-height: 60rpx; */
	}
	.view-printer-change{
		height: 200rpx;
		line-height: 200rpx
	}
	.online{
		background-color: #71D5A1;
	}
	.offline{
		background-color: #DD6161;
	}
	.view-file-result{
		background-color: #EEEEEE;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		width: 140rpx;
		padding:10rpx 0x;
		text-align: center;
		color: white;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 70rpx;
	}
	.success{
		color: #18B566;
	}
	.fail{
		color: #DD524D;
	}
	.waitting{
		color: #E2BF79;
	}
	
</style>

